<template>
	<view style="padding-bottom: 30rpx;">
		<view class="header-box">
			<topTabBar :hiddenTitle="true"></topTabBar>
			<view class="topLogo">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- input输入框 -->
		<view class="" style="margin-top: -500rpx;">
			<view class="input-group">
				<view class="input-row">
					<image class="img" src="/static/login/pw.png" mode="widthFix"></image>
					<input class="input" type="text" v-model="nickname" placeholder="请输入姓名"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
				<view class="input-row">
					<image class="img" src="/static/login/phone.png" mode="widthFix"></image>
					<input class="input" maxlength="11" type="number" v-model="mobile" placeholder="请输入手机号"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
				<view class="input-row border-bottom">
					<image class="img" src="/static/login/pw.png" mode="widthFix"></image>
					<input class="input code-input" type="number" maxlength="6" placeholder="请输入验证码" v-model="code"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
					<button class="code-btn cu-btn bg-white get-button" @tap="sendCode">{{ CodeText }}</button>
				</view>
				<view class="input-row">
					<image class="img" src="/static/login/pw.png" mode="widthFix"></image>
					<input class="input" type="text" v-model="password" placeholder="请输入密码"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
				<view class="input-row">
					<image class="img" src="/static/login/pw.png" mode="widthFix"></image>
					<input class="input" type="text" v-model="rewpassword" placeholder="请再次输入密码"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
				<view class="input-row">
					<image class="img" src="/static/login/incode.png" mode="widthFix"></image>
					<input class="input" type="text" v-model="invitation" placeholder="请输入邀请码" maxlength="8"
						placeholder-style="color:#BFBFBF;font-size:30rpx;" />
				</view>
			</view>
			<!-- 登陆注册按钮 -->
			<view class="login-btn">
				<view class="subtn"><button type="primary" @click="loginClick">注册</button></view>
				<view class="tipbtn">
					<text class="span-btn" @click="navigator('/pages/login/login/login')">立即登录</text>
				</view>
			</view>
			<view class="login-xie">
				<image @click="clickX"
					:src="isCheckXie == true ? '/static/login/choose.png':'/static/login/choose_active.png'" mode="">
				</image>
				<view class="" @click.stop="toXieyi">
					点击同意<text>《用户注册协议》</text>和<text>《委托寄售服务协议》</text>
				</view>
			</view>
			<uni-popup ref="popup" :show="false" :maskClick="false" style="z-index: 999;">
				<view class="descriptionContent">
					<view style="color: #f00;" v-if="remainingTime > 0">倒计时：{{ remainingTime }}秒</view>
					<u-parse :content="xieyiInfo.register"></u-parse>
					<u-parse :content="xieyiInfo.privacy"></u-parse>
					<view class="up-img">
						<image class="imgsss" v-if="signature" @click="getimgPreview"  :src="$IMG_URL+signature"
							mode=""></image>
						<image v-else class="imgsss" @click="choiceImg" src="/static/me/upimg.png" mode=""></image>
						<image v-show="signature" @click="deleteImg" class="cose-img" src="@/static/closes.png"></image>
					</view>
					<view class="up-tet">请上传签名照</view>
					<!-- v-show="remainingTime == 0"  -->
					<view class="pop-bottom" @click="qianSure">
						签名确认
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import topTabBar from '@/components/topTabBar.vue';
	import {
		mapActions
	} from "vuex";
	const pushServices = uniCloud.importObject('push-services')
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			topTabBar,
			uniPopup
		},
		data() {
			return {
				signature: '', //签名照
				remainingTime: 15, // 初始倒计时时间为15秒
				timer: null, // 计时器
				xieyiInfo: '',
				CodeText: '获取验证码',
				CodeNumDown: 60,
				mobile: '',
				password: '',
				nickname: '',
				code: '', //验证码
				rewpassword: '',
				invitation: '',
				isCheckXie: false, //协议状态
				appId: 'wx44d8eeb08d0cf696',
				wxCode: ''
			};
		},
		onShow() {
			this.initxieyi();
		},
		onLoad(options) {
			// const query = uni.getLaunchOptionsSync().query;
			this.invitation = options.invitation ? options.invitation : ''; //获取邀请码
			let ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				console.log(window.location.href, 'window.location.href')
				if (window.location.href.search('code') == -1) {
					// 没有code前去授权 
					var local = 'https://chuanhejingruih5.ruipingkeji.com/#/pages/login/register/register';
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
						'&redirect_uri=' + encodeURIComponent(local) +
						'&response_type=code&scope=snsapi_base&state=' + this.invitation + '#wechat_redirect'
				} else {
					this.wxCode = this.getQueryString('code');
					if (window.location.href.search('state')) {
						this.invitation = this.getQueryString('state');
					}
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: '请在微信浏览器打开'
				})
			}
		},
		onUnload() {
			// 页面卸载时清除计时器
			this.clearCountdown();
		},
		methods: {
			// 图片放大
			getimgPreview() {
				let imgList = []
				imgList.push(this.$IMG_URL+this.signature)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: imgList
				})
			},
			// 删除照片
			deleteImg(){
				this.signature = ''
			},
			// 签名确认
			qianSure() {
				if (this.signature) {
					this.$refs.popup.close()
				} else {
					console.log(1111)
					uni.showToast({
						icon: 'none',
						title: '请上传签名照片'
					})
				}
			},
			// 
			toXieyi() {
				uni.navigateTo({
					url: '/pages/me/xieyi/xieyi'
				})
			},
			initxieyi() {
				this.$http('other.getsystem', {}, '抢购中...').then(res => {
					if (res.code == 1) {
						this.xieyiInfo = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 发送验证码
			sendCode() {
				let ph = /^[1][0-9]{10}$/;
				if (!ph.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				this.downTime(this.CodeNumDown);
				this.$http('user.smsSend', {
					mobile: this.mobile,
					event: 'register'
				}, '获取中...').then(res => {
					this.downTime(this.CodeNumDown)
					if (res.code === 1) {
						this.downTime(this.CodeNumDown);
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				});
			},
			downTime(num) {
				if (num === 0) {
					this.CodeText = '获取验证码';
					num = 60;
					this.CodeNumDown = num;
					return;
				} else {
					num--;
					this.CodeText = num + 's后发送';
					this.CodeNumDown = num;
				}
				var _this = this;
				setTimeout(function() {
					_this.downTime(num);
				}, 1000);
			},
			// 点击协议
			clickX() {
				this.isCheckXie = !this.isCheckXie
				if (this.isCheckXie == true) {
					this.$refs.popup.open()
					this.remainingTime = 15; // 重置倒计时时间
					this.timer = setInterval(() => {
						if (this.remainingTime > 0) {
							this.remainingTime -= 1;
						} else {
							this.clearCountdown();
						}
					}, 1000);
				} else {
					uni.showToast({
						icon: 'none',
						title: '请点击同意协议'
					})
				}
			},
			clearCountdown() {
				clearInterval(this.timer);
				this.timer = null;
				// 倒计时结束后的操作
				console.log('倒计时结束！');
			},
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			// 注册
			loginClick() {
				let ph = /^[1][0-9]{10}$/;
				// let psw = /^(\w){8,8}$/;
				if (!this.nickname) {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
					return
				}
				if (!ph.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return
				}
				if (this.password != this.rewpassword) {
					uni.showToast({
						icon: 'none',
						title: '两次密码不一致'
					})
					return
				}
				if (!this.isCheckXie) {
					uni.showToast({
						icon: 'none',
						title: '请点击同意协议'
					})
					return
				}
				this.$http('user.userRegister', {
					nickname: this.nickname,
					mobile: this.mobile,
					password: this.password,
					code: this.code,
					invitation: this.invitation,
					signature: this.signature, //签名照
					wx_code: this.wxCode
				}, '注册中...').then(res => {
					console.log(res, this.wxCode, '注册？')
					uni.showLoading({
						title: '注册中'
					});
					if (res.code === 1) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login/login'
							})
						}, 2000);
					} else if (res.code === 433) {
						uni.hideLoading();
						var local = 'https://h5.ruipingkeji.com/#/pages/login/register/register';
						window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this
							.appId +
							'&redirect_uri=' + encodeURIComponent(local) +
							'&response_type=code&scope=snsapi_base#wechat_redirect'
					} else {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				});
			},
			// 上传图片
			choiceImg() {
				uni.showActionSheet({
					itemList: ['拍照', '从手机相册选择'],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0]);
									}
								});
								break;
							case 1:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['album'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0])
									}
								});
								break;
							default:
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 裁剪完成后上传
			uploadUserImg(blob) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: that.$API_URL + '/common/upload',
					filePath: blob,
					name: 'file',
					success: res => {
						uni.hideLoading();
						let imgData = JSON.parse(res.data)
						that.signature = imgData.data.url
					},
				});
			},
			navigator(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.descriptionContent {
		width: 550rpx;
		height: 800rpx;
		background: #FFF;
		padding: 20rpx;
		border-radius: 20rpx;
		z-index: 999;
		.up-img {
			width: 160rpx;
			height: 160rpx;
			margin: 20rpx 0 0 20rpx;
			position: relative;
			.imgsss {
				width: 100%;
				height: 100%;
			}
			.cose-img{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				position: absolute;
				top:-10rpx;
				left: 134rpx;
			}
		}

		.up-tet {
			font-size: 24rpx;
			margin: 20rpx 0 20rpx 10rpx;
		}

		.pop-bottom {
			height: 80rpx;
			background: linear-gradient(93deg, #6FAD19 0%, #287E34 100%);
			width: 550rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 49rpx;
			font-size: 32rpx;
			font-weight: 500;
			border: none;
			color: #fff;
			bottom: 160rpx;
		}
	}

	.header-box {
		width: 100%;
		height: 950rpx;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;

		.topLogo {
			width: 100%;
			text-align: center;
			padding-top: 120rpx;

			.logo {
				width: 138rpx;
				height: 138rpx;
				margin: 0 auto;
				border-radius: 20px;
			}
		}
	}

	.form-group {
		padding: 0 74rpx;
		margin-top: 140rpx;

		.from-cell {
			width: 100%;
		}
	}

	/*input输入框*/
	.input-group {
		padding: 32upx 75upx 20upx;

		.input-row {
			line-height: 105upx;
			height: 105upx;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 2upx solid #EEEEEE;
			transition: all 0.5s ease-in-out;

			.close-img {
				width: 32rpx;
				height: 32rpx;
			}

			.img {
				width: 34rpx;
				height: 34rpx;
				margin-right: 30upx;
			}

			.input {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #BFBFBF;
				font-family: PingFangSC-Semibold, PingFang SC;
			}

			.code-input {
				width: 400upx;
			}

			.code-btn {
				font-size: 24upx;
				display: block;
				line-height: 64upx;
				position: absolute;
				right: 0;
				top: calc(50% - 32upx);
				color: #287E34;
				background-color: #fff;
			}
		}


		.invalid-feedback {
			font-size: 24upx;
			color: #c7000a;
			padding-top: 5px;
			padding-left: 20upx;
		}
	}

	/*登录按钮*/
	.login-btn {
		padding: 30upx 50upx;

		.subtn {
			margin-bottom: 30upx;

			button {
				height: 98px;
				background: linear-gradient(93deg, #6FAD19 0%, #287E34 100%);
				// box-shadow: 0px 2px 4px 0px rgba(9, 113, 242, 0.2);
				width: 100%;
				height: 98rpx;
				text-align: center;
				line-height: 90rpx;
				border-radius: 49rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				color: #fff;
			}

			button::after {
				border: none;
			}
		}

		.tipbtn {
			display: flex;
			align-items: center;
			justify-content: center;

			.span-btn {
				font-size: 26rpx;
				display: inline-block;
				width: 30%;
				text-align: center;
				position: relative;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.45);
			}
		}
	}

	.login-xie {
		display: flex;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		width: 599rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		text {
			color: #698BFF;
		}
	}
</style>